<template>
  <div class="my-con">
    <div v-for="(item, index) in list" :key="index" class="my-box">
      <div class="my-top">
        <div class="top-con">
          <div class="top-tit">
            {{ item.projectName }}
          </div>
          <span class="top-btn">
            <span v-if="item.projectStatus === 'doing'" class="completed">进行中</span>
            <span v-else-if="item.projectStatus === 'waiting'" class="completed">已挂起</span>
            <span v-else-if="item.projectStatus === 'complete'" class="completed">已交付</span>
            <span v-else-if="item.projectStatus === 'close'" class="completed">已关闭</span>
            <span v-else class="in-progress">准备中</span>
          </span>
        </div>
        <div class="top-icon">
          <image src="../../../static/project/search.png" class="icon-first" @click="clickProjectDetail(item)" />
          <!-- <van-icon name="edit" style="margin-right: 12px" size="20px" @click="editProjectClick(item)" /> -->
          <!-- <van-icon name="delete-o" color="red" size="20px" @click="delProjectClick(item.id)" /> -->
        </div>
      </div>
      <div @click="clickProjectDetail(item)">
        <div class="top-ask">
          <div>商务负责人</div>
          <div>{{ item.projectMyBusinessHeadName ? item.projectMyBusinessHeadName : '' }}</div>
        </div>
        <div class="top-ask">
          <div>技术负责人</div>
          <div>{{ item.projectMyTechnologyHeadName ? item.projectMyTechnologyHeadName : '' }}</div>
        </div>
        <div class="top-start">
          <div>计划开始</div>
          <div>{{ item.planStartDate?item.planStartDate:'' | timeFormat }}</div>
        </div>
        <div class="top-end">
          <div>计划完成</div>
          <div>{{ item.planEndDate?item.planEndDate:'' | timeFormat }}</div>
        </div>
        <div class="list">
          <div>里程名称</div>
          <div class="lcname-class">
            <span>{{ item.projectSchedule?item.projectSchedule:'' }}</span>
          </div>
        </div>
        <view class="list-status">
          <view>里程状态</view>
          <view v-if="item.projectApprovalStatus == 'disapproval'" class="status">
            <view class="status-color" />
            <view class="font-color">
              未开始
            </view>
          </view>
          <view v-else-if="item.projectApprovalStatus == 'approval'" class="status">
            <view class="status-colorTwo" />
            <view class="font-colorTwo">
              进行中
            </view>
          </view>
        </view>
      </div>
    </div>
  </div>
</template>
<script>
import { delProject, getProjectList } from '@/apis/project'
import { formatTimestamp } from '@/utils/format'
import { showConfirm } from '@/utils/common'
export default {
  filters: {
    timeFormat(value) {
      return formatTimestamp(value)
    },
  },
  props: {
    list: {
      type: Array,
    },
    project: {
      type: String,
    },
  },
  data() {
    return {
      show: false,
      projectId: '',
    }
  },
  created() {
    // console.log('每次进来会调用!')
    uni.$emit('cleanProjForm')
  },
  mounted() {},
  methods: {
    // 项目详情
    clickProjectDetail(data) {
      // if (this.project === 'tabProject') {
      // uni.navigateTo({
      //   url: `/pages/index/index?projectId=${id}`,
      // })
      uni.navigateTo({
        url: `/pages/index/index?projData=${JSON.stringify(data)}`,
      })
      // } else {
      // uni.navigateTo({
      //   url: `/pages/project/detail/index?projectId=${id}`,
      // })
      // }
    },
    // 项目修改
    editProjectClick(data) {
      // console.log(data, '修改')
      uni.$emit('edit', data)
      // this.$emit('editProj')
      uni.redirectTo({
        url: '/pages/office/project-approval/index?type=edit',
      })
      // uni.navigateBack({
      //   url: '/pages/office/project-approval/index',
      // })
    },
    // 项目删除
    delProjectClick(id) {
      this.projectId = id
      // this.show = true
      // uni.setNavigationBarColor({
      //   // 这里的颜色设置值能是十六进制这种 #999996，不支持其它类型
      //   frontColor: '#000000', // 字体颜色只能是黑或者白，#000000或者#FFFFFF,
      //   backgroundColor: '##999996', // 只改变这个背景颜色，不改变‘frontColor’字体颜色，背景色不会生效
      // })
      // uni.setNavigationBarTitle({
      //   title: 'abc',
      // })
      // this.$refs.alertDialog.open('center')
      // console.log(id, '删除项目id')
      showConfirm('确认删除该项目?').then(() => {
        this.dialogConfirm()
      })
    },
    // 确定按钮
    async dialogConfirm() {
      this.show = false
      const res = await delProject(this.projectId)
      if (res.code == 0 || res.code == 200) {
        uni.showToast({
          title: '删除成功!',
          icon: 'success',
          duration: 1700,
        })
        this.getList()
      }
    },
    // 重新获取项目列表
    getList() {
      this.$emit('getProjList')
    },
    // 取消按钮
    cancel() {
      this.show = false
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .uni-popup-dialog {
  // z-index: 9999;
}
.my-con {
  margin-bottom: 200px;
  width: 100%;
  height: auto;
  margin-top: 15px;
  .my-box {
    width: 92%;
    height: auto;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    margin-top: 10px;
    padding-top: 12px;
    .my-top {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 93%;
      .top-con {
        display: flex;
        align-items: center;
        .top-tit {
          color: #333;
          font-size: 16px;
          font-weight: 600;
        }
        .top-btn {
          font-size: 14px;
          span {
            border-radius: 3px;
            padding: 0px 5px;
            margin-left: 10px;
          }
          .completed {
            color: #739eca;
            border: 1px solid #739eca;
            background: #f1f5f9;
          }
          .in-progress {
            color: #04cb64;
            border: 1px solid #04cb64;
            background: #e5faef;
          }
        }
      }

      .top-icon {
        color: #739eca;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
		.icon-first{
			width: 22px;
			height: 22px;
			// margin-right: 12px;
		}
      }
    }
    .top-time {
      font-size: 12px;
      color: #333;
      margin: 0 auto;
      width: 93%;
      padding: 8px 0px;
    }
    .top-ask,
    .top-start,
    .top-end {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 93%;
      padding: 6px 0px 6px 0px;
      div {
        color: #333;
        font-size: 14px;
      }
    }
    .list {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 30px;
      padding: 0px 12px;
      .lcname-class {
        background-color: #f1f5f9;
        color: #739eca;
        margin-top: 6px;
        height: 20px;
        padding: 0px 8px;
        line-height: 20px;
      }
    }
    .list-status {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 30px;
      padding: 0px 12px;
      .status {
        display: flex;
        flex-direction: row;
        align-items: center;
        .status-color {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #cccccc;
        }
        .font-color {
          margin-left: 6px;
          color: #cccccc;
          font-weight: 550;
        }
        .status-colorTwo {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #739eca;
        }
        .font-colorTwo {
          margin-left: 6px;
          color: #739eca;
          font-weight: 550;
        }
        .status-colorThree {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #04cb64;
        }
        .font-colorThree {
          margin-left: 6px;
          color: #04cb64;
          font-weight: 550;
        }
        .status-colorFourth {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #999;
        }
        .font-colorFourth {
          margin-left: 6px;
          color: #999;
          font-weight: 550;
        }
      }
    }
    .progress-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 93%;
      padding: 6px 0px 6px 0px;
      .van-percent {
        width: 88%;
        display: flex;
        align-items: center;
        van-progress {
          width: 85%;
        }
        span {
          padding-left: 5px;
          color: #739eca;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.van-projress__pivot {
  display: none;
}
</style>
